<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节奏达人</title>
    <script src="js/three.min.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/THREEx.KeyboardState.js"></script>
    <script src="js/THREEx.FullScreen.js"></script>
    <script src="js/THREEx.WindowResize.js"></script>
    <style>
        body {
            /*background-color:black;
            overflow: hidden;*/
            margin: 0;
            padding: 0;
   
        }
        .div{
            background: url(res/bg4.png);
            width: 300px;
            height: 550px;
            padding: 20px;
            text-align: center;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
        }

        .score-container {
            position: absolute;
            top: 20px;
            right: 30px;
            transition: transform 0.5s 4s;
        }

        .score-container #score {
            color: #ffffff;
            font-size: 4vh;
            font-family: 'Exo', sans-serif;
            font-weight: 70;
        }


        .aixin-container {
            position: absolute;
            top: 20px;
            left:20px;
        }
        #aixin1 { 
         position:absolute;
         left:20px;
          top:20px;
         }
         #aixin2 { 
         position:absolute;
         left:55px;
          top:20px;
         }
         #aixin3 { 
         position:absolute;
         left:90px;
          top:20px;
         }
         
         #ai1 { 
         position:absolute;
         left:20px;
          top:20px;
         }
         #ai2 { 
         position:absolute;
         left:55px;
          top:20px;
         }
         #ai3 { 
         position:absolute;
         left:90px;
          top:20px;
         }

         #pass{
         position:absolute;
         left:80px;
          top:60px;

         }
    </style>
</head>
<body>  

    <div class="div">


    <div id="back" style="display:none">
    <h1><a href="">重新开始</a></h1>
    <h1><span>您的分数为: </span><span id="score1"></span></h1>

    </div>
    <div id="passgame" style="display:none">
        <img src='res/pass.png' id='pass' >
    </div>


    <div class="score-container">
         <div id="score" style="display: block"></div>
    </div>

    <div class="aixin-container">
        <div id="aixin">
            <img src='res/1.png' id='aixin1'  style='display:block'>
            <img src='res/1.png' id='aixin2'  style='display:block'>
            <img src='res/1.png' id='aixin3'  style='display:block'>
           
            <img src='res/2.png' id='ai1'  style='display:none'>
            <img src='res/2.png' id='ai2'  style='display:none'>
            <img src='res/2.png' id='ai3'  style='display:none'>
     </div>
   </div>

    <div id="ThreeJS"></div>

    <audio //autoplay="autoplay" 
    src="sound/healer.mp3" preload="auto"  id="sound" ></audio>

    <audio src="sound/explode.mp3" preload="auto" id="explode_sound"></audio>
    <script src="js/index.js"></script>
    <!-- 上传代码 -->

</div>
</body>
</html>